<template>
  <div class="post_strategy">
    <div class="strategy_title">相关攻略</div>
    <div
      class="postList same_strategy"
      @click="getStrategyPost(item.id)"
      v-for="item in postData"
      :key="item.id"
    >
      <!-- 没有封面图片的 -->
      <div class="strategy_post" v-if="item.images.length < 1">
        <div class="post_content">
          <div class="post_title">{{item.title}}</div>
          <div class="date">
            <span>{{item.updated_at | formatTime}}</span>
            <span>阅读</span>
            <span v-if="item.watch">{{item.watch}}</span>
            <span v-else>1</span>
          </div>
        </div>
      </div>
      <!-- 有封面图片的 -->
      <div class="strategy_post1" v-if="item.images.length >= 1">
        <div class="post1_content">
          <div class="post_img">
            <img :src="item.images[0]" alt />
          </div>
          <div class="content">
            <div class="post_title">{{item.title}}</div>
            <div class="date">
              <span>{{item.updated_at | formatTime}}</span>
              <span>阅读</span>
              <span v-if="item.watch">{{item.watch}}</span>
              <span v-else>1</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  filters: {
    // 时间戳过滤器
    formatTime(val) {
      let res = moment(val).format("YYYY-MM-DD");
      return res;
    },
  },
  data() {
    return {
      postData: [],
    };
  },
  mounted() {
    // console.log(this.$route.query);
    this.$axios({
      url: "/posts/recommend",
      params: this.$route.query,
    }).then((res) => {
      this.postData = res.data.data;
      console.log("---相关攻略请求过来的文章---");
      console.log(this.postData);
    });
  },
  methods: {
    getStrategyPost(id) {
      console.log("获取文章攻略ID:" + id, "把id传给父组件");
      // 进行路由跳转
      this.$router.push({ path: `/post/details?id=${id}` });
      // this.$axios({
      //   url: "/posts",
      //   params: { id },
      // }).then((res) => {
      //   console.log("获取相关攻略文章数据：");
      //   const data = res.data.data;
      //   console.log(data[0]);
      // });
    },
  },
};
</script>

<style lang="less" scoped>
.post_strategy {
  .strategy_title {
    font-size: 18px;
    height: 35px;
    border-bottom: 1px solid #dddddd;
  }
  .postList {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    &:hover {
      box-shadow: 6px 3px 7px 3px #eee;
    }
    // 没有封面图
    .strategy_post {
      border-bottom: 1px solid #ddd;
      padding: 20px 0;
      .post_content {
        height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .date {
          font-size: 12px;
          color: #999;
        }
        .post_title {
          width: 100%;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    // 有封面图
    .strategy_post1 {
      border-bottom: 1px solid #ddd;
      padding: 20px 0;
      .post1_content {
        height: 80px;
        display: flex;
        .post_img {
          img {
            width: 100px;
            height: 80px;
            object-fit: cover;
            margin-right: 10px;
          }
        }
        .content {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .post_title {
            width: 168px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .date {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }
}
</style>